<template>
	<a-card :bordered="false">
		<!-- 查询区域 -->
		<div class="table-page-search-wrapper">
			<a-form layout="inline" @keyup.enter.native="searchQuery">
				<a-row :gutter="24">
					<template>
						<a-col :md="6" :sm="8">
							<a-form-item label="摄像机名称">
								<a-input placeholder="请输入摄像机名称查询" v-model="queryParam.name"></a-input>
							</a-form-item>
						</a-col>
						<a-col :md="6" :sm="8">
							<a-form-item label="是否在线:">
								<a-select placeholder="请选择是否在线" showSearch showArrow optionFilterProp="children"
									:getPopupContainer="(node) => node.parentNode" 
									:defaultActiveFirstOption="false" v-model="queryParam.online">
									<a-select-option value="1">是</a-select-option>
									<a-select-option value="0">否</a-select-option>
								</a-select>
							</a-form-item>
						</a-col>
					</template>

					<a-col :md="6" :sm="8">
						<span style="float: left;overflow: hidden;" class="table-page-search-submitButtons">
							<a-button type="primary" @click="searchQuery" icon="search">查询</a-button>
							<a-button type="primary" @click="resetParam" icon="reload" style="margin-left: 8px">重置
							</a-button>
						</span>
					</a-col>

				</a-row>
			</a-form>
		</div>

		<!-- table区域-begin -->
		<div>
			<a-table ref="table" bordered size="middle" rowKey="cameraId" :columns="columns" :dataSource="dataSource"
				:pagination="ipagination" :loading="loading">
				
				<span slot="action" slot-scope="text, record">
					<a @click="editCamera(record)">编辑</a>
					<a-divider type="vertical" />
					<a-dropdown>
						<a class="ant-dropdown-link">
							更多
							<a-icon type="down" />
						</a>
						<a-menu slot="overlay">
							<a-menu-item>
								<a href="javascript:;" @click="cameraDetail(record)">详情</a>
							</a-menu-item>
							<a-menu-item>
								<a-popconfirm title="确定启用/停用吗?" @confirm="() => changeStatus(record)">
									<a>启用/停用</a>
								</a-popconfirm>
							</a-menu-item>
						</a-menu>
					</a-dropdown>
				</span>
			</a-table>
		</div>
		<camera-edit-modal ref="cameraeditmodal" @ok="editModalOk"></camera-edit-modal>
	</a-card>
</template>

<script>
	import {
		JeecgListMixin
	} from '@/mixins/JeecgListMixin'
	import {
		postAction
	} from '@/api/manage'
	export default {
		name: "PlatformCameraList",
		mixins: [JeecgListMixin],
		data() {
			return {
				description: '这是摄像机管理页面',
				queryParam: {
					devId: this.$route.params.devId,
					name: undefined,
					online: undefined
				},
				columns: [{
						title: '摄像机名称',
						align: "center",
						dataIndex: 'name',
						width: 60
					},
					{
						title: '所属设备',
						align: "center",
						dataIndex: 'devName',
						width: 50
					},
					{
						title: '所属设备编号',
						align: "center",
						dataIndex: 'devCode',
						width: 80
					},
					{
						title: '摄像机描述',
						align: "center",
						width: 60,
						dataIndex: 'cameraDesc',
					},
					{
						title: '摄像机地点',
						align: "center",
						width: 60,
						dataIndex: 'location',
					},
					{
						title: '是否在线',
						align: "center",
						width: 60,
						dataIndex: 'online',
						customRender: function(text) {
							if (text == 1) {
								return "是"
							} else if (text == 0) {
								return "否"
							}
						}
					},
					{
						title: '是否有云台',
						align: "center",
						width: 60,
						dataIndex: 'hasPtz',
						customRender: function(text) {
							if (text == 1) {
								return "有"
							} else if (text == 0) {
								return "无"
							}
						}
					},
					{
						title: '启用状态',
						align: "center",
						width: 60,
						dataIndex: 'used',
						customRender: function(text) {
							if (text == 1) {
								return "启用"
							} else if (text == 0) {
								return "禁用"
							}
						}
					}
				],
				url: {
					list: "/platform/camera-page"
				},
			}
		},
		created() {
		},
		watch: {// 如果路由发生变化，再次执行该方法
			'$route' (to, from) {
				console.log("watch>>>>>>to:"+JSON.stringify(to.path))
				console.log("watch>>>>>>from:"+JSON.stringify(from.path))
				console.log("watch>>>>>>devId:"+JSON.stringify(this.$route.params.devId));
				if(to.path == '/dev/camera'){
					this.queryParam.devId=this.$route.params.devId;
					this.loadData();
				}
			}
		},
		methods: {
			editCamera: function(record) {
				this.$refs.cameraeditmodal.show(record);
				this.$refs.cameraeditmodal.disableSubmit = false;
			},
			editModalOk() {
				// 修改 成功时，重载列表
				this.loadData();
			},
			cameraDetail: function(record) {
				this.$refs.cameraeditmodal.show(record);
				this.$refs.cameraeditmodal.title = "详情";
				this.$refs.cameraeditmodal.disableSubmit = true;
			},
			changeStatus(record) {
				let objTemp = {}
				objTemp.used = (record.used == 0) ? 1 : 0
				objTemp.cameraId = record.cameraId
				postAction("/dev/camera/set-used", objTemp).then(res => {
					if (res.code == '00000') {
						this.$message.success("修改成功")
						this.loadData()
					} else {
						this.$message.warning("修改失败:" + res.msg)
					}
				})
			},
			resetParam() {
				this.queryParam.name=undefined
				this.queryParam.online=undefined
				this.loadData(1)
			}
		}
	}
</script>
<style scoped>
	@import '~@assets/less/common.less'
</style>
